<script setup>
import { defineProps, watch, onMounted, nextTick, ref, defineModel } from 'vue';
import MarkdownText from "@/components/MarkdownText.vue";

const props = defineProps({
  messages: {
    type: Array,
    required: true
  },
  advanced: {
    type: Boolean,
    default: false
  }
});

const system_prompt = defineModel();

const saveSystemPrompt = () => {
  localStorage.setItem('system_prompt', system_prompt.value);
};

const resetSystemPrompt = () => {
  system_prompt.value = localStorage.getItem('default_system_prompt');
};

const scrollToBottom = () => {
  const chatPanel = document.querySelector('.chat-panel');
  if (chatPanel) {
    chatPanel.scrollTop = chatPanel.scrollHeight;
  }
};

watch(props.messages, async () => {
  await nextTick();
  scrollToBottom();
});

onMounted(() => {
  scrollToBottom();
});
</script>

<template>
  <div className="chat-panel">
    <div class="message">
      <div class="chatbot-message">
        <template v-if="!advanced">
          <div class="name">ChatBot</div>
          <MarkdownText :content="'你好！欢迎来到第二个千禧年的魏启大陆！你是陈意志帝国的商人，又或是铁桶帝国的农民？你想要开始怎样的一段冒险呢？请告诉我吧！'" />
        </template>
        <template v-if="advanced">
          <div class="name">System Prompt</div>
          <div style="padding:10px;">
            <textarea
              v-model="system_prompt"
              placeholder="提供给LLM的系统Prompt，留空则为默认（你是一个文字冒险游戏）。"
              rows="6" />
              <button @click="saveSystemPrompt">保存系统提示词到浏览器</button>
              <button @click="resetSystemPrompt">重置系统提示词到预设提示词</button>
          </div>
        </template>
      </div>
    </div>

    <div v-for="(message, index) in messages" :key="index" class="message">
      <div class="user-message">
        <div class="name">你</div>
        <MarkdownText :content="message.question" />
      </div>
      <div class="chatbot-message">
        <div class="name">ChatBot</div>
        <button @click="message.show_context = !message.show_context">
          {{ message.show_context ? '隐藏' : '显示' }}上下文
        </button>
        <div class="context" v-if="message.show_context">
          <div class="reasoning" v-if="message.reasoning !== ''"> <p v-for="value in message.reasoning.split('\n')">{{value}}</p> </div>
          <div class="cquery"> <p> {{message.cquery}} </p> </div>
          知识库上下文：
          <p v-for="value in message.context.split('\n')">{{value}}</p>
        </div>
        <MarkdownText :content="message.answer" />
      </div>
    </div>
  </div>
</template>

<style scoped>

.chat-panel {
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.message {
  margin: 10px;
  padding: 2px;
  border: 3px dashed #ddd;
  border-radius: 10px;
}

.chatbot-message .name {
  font-weight: bold;
  display: inline-block;
  margin: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #e0f7fa;
  border-radius: 8px;
  color: black;
}

.chatbot-message {
  padding:10px;
  background-color: #e8eded;
  color: black;
  font-family: 'Arial', sans-serif;
  border-radius: 10px 10px;
}

.user-message .name {
  font-weight: bold;
  display: inline-block;
  margin: 5px;
  padding-left:10px;
  padding-right: 10px;
  background-color: #fae0e0;
  border-radius: 8px;
  color: black;
}

.user-message {
  padding: 10px;
  background-color: #000000;
  color: white;
  font-family: 'Courier New', monospace;
  border-radius: 10px 10px;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
  font-family: 'Arial', sans-serif;
}

.context {
  margin-left: 10px;
  margin-right: 10px;
  padding: 5px;
  border:solid;
  background-color: #fff9ee;
}

.cquery {
  margin: 10px;
  border:solid;
}


/* Media query for mobile screens */
@media (max-width: 600px) {
  .chat-panel {
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .message {
    margin: 5px;
    padding: 1px;
  }

  .chatbot-message, .user-message {
    padding: 5px;
  }

  .chatbot-message .name, .user-message .name {
    margin: 2px;
    padding-left: 5px;
    padding-right: 5px;
  }

  textarea {
    padding: 5px;
  }
}

</style>